<template>
  <div class="bar-code"  @click="over" v-if="showcode">
    <qrcode-vue :value="code" :size="20" />
  </div>

  <div class="bar-over" v-if="show" ref="codeRef">
    <qrcode-vue :value="code" :size="100" />
  </div>
</template>
<script setup>
import {ref, computed} from "vue";
// 二维码
import QrcodeVue from "qrcode.vue";
import {onClickOutside} from "@vueuse/core";
const codeRef = ref(null)

const model = defineModel()
const transType = defineModel('transType')
const showcode = computed(() => {
  return code.value !== ''
})
const show = ref(false)
onClickOutside(codeRef, event => {
  show.value = false
})
const code = computed(() => {
  if(transType.value && model.value) {
    return transType.value + '-' + model.value
  }
  return ''
})
const over = () => {
  show.value = true
}

</script>
<style scoped lang="scss">
.bgc {
  background-color: #dedede;
  border-radius: 6px;
}
.bar-code {
  z-index: 999999;
  &:hover {
    cursor: pointer;
  }

}
.bar-over {
  position: absolute;
  background-color: white;
  z-index: 999999;
  padding: 10px;
  border: 1px solid grey;
  border-radius: 4px;
}
</style>